<template>
  <view class="registration">
	  <!-- <text>{{firtext.name}}</text> -->
    <form @submit.prevent="submitForm">
      <view class="form-container">
        <view class="form-group">
          <label for="name" class="form-label">姓名：</label>
		  <!-- <view>{{text.name}}</view> -->
          <view class="input-container">
            <input
              v-model="formData.name"
              type="text"
              id="name"
              placeholder="请输入您的姓名"
              required
              class="input-field"
            />
          </view>
        </view>
        <view class="form-group">
          <label for="contact" class="form-label">联系方式：</label>
          <view class="input-container">
            <input
              v-model="formData.telephone"
              type="text"
              id="contact"
              placeholder="请输入您的联系方式"
              required
              class="input-field"
            />
          </view>
        </view>

        <!-- 添加更多表单字段，如性别、年龄等 -->
      </view>

     <button type="submit" class="submit-button" @click.prevent="sendDataToBackend(),turnpage()">提交报名</button>
    </form>
  </view>
</template>

 <script>
export default {
	mounted() {
		this.postData()
	},
  data() {
    return {
      formData: {},
	  name: '',
	  text:[],
	  firtext:'',
    };
  },
  methods: {
	postData(){
		uni.request({
		  url: "http://localhost:8231/getTLSAplData",
		  method: "POST",
		  data: {
		    params: {},
		  },
		  // header: {
		  //   'content-type': 'application/json', // 设置请求头
		  // },
		  success: (res) => {
		    this.text = res.data.result.application; // 将响应数据存储在 text 变量中
			this.firtext=this.text[0];
		  },
		  // fail: (err) => {
		  //   console.error(err);
		  // },
		});
	},
	
	
	sendDataToBackend() { // 更改函数名
		console.log(this.formData)
	      uni.request({
	        url: "http://localhost:8231/ttt",
	        method: "POST",
	        data: {
	          params: {
					...this.formData, // 添加需要传递的数据
					
	            // 添加更多需要传递的数据
	          },
	        },
	        success: (res) => {
				alert("报名成功")
	        },
	      });
	 
		},
		
		
		
		
		turnpage() {
		  uni.navigateTo({
		    url: '/pages/success/success'
		  });
		}
	
  },
 
 
 
 
  
};
 </script>


<style scoped>
.registration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(90deg, #ff69b4, #6495ed);
}

form {
  width: 80%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  font-weight: bold;
  font-size: 18px;
  color: #ff69b4;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px; /* 调整标签和输入框之间的下边距 */
}

.input-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

.input-field {
  width: 100%;
  padding: 10px;
  border: none;
  outline: none;
}

.input-field:hover,
.input-field:focus {
  border-color: #ff69b4;
  box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}

.submit-button {
  width: 100%;
  padding: 10px;
  background-color: #ff69b4;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #ff3385;
}
</style>
